<template>
  <div>
    <a-select
      v-model:value="innerVal"
      placeholder="请选择"
      allow-clear
      style="width: 300px"
      option-label-prop="children"
    >
      <a-select-option
        v-for="item in riderList"
        :value="item.id"
        :label="item.name"
      >
        <span>姓名：{{ item.name }}</span>
        <span style="margin-left: 15px">单量：{{ item.orderNum }}</span>
      </a-select-option>
    </a-select>
    <a-button @click="handleChangeRider">更换</a-button>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, defineProps, defineEmits } from 'vue'
import { selectList } from '@/api/rider'
import { changeRider } from '@/api/order'
import { Modal } from 'ant-design-vue'
const props = defineProps({
  value: String,
  orderId: String,
})
const emit = defineEmits(['update:value', 'change'])

const riderList = ref([])
const orderId = ref(props.orderId)

console.log(props.value)
const innerVal = computed({
  get() {
    return props.value
  },
  set(e) {
    console.log(e)
    emit('update:value', e)
  },
})

const getRiders = async () => {
  const { data } = await selectList()
  riderList.value = data
}
const handleChangeRider = () => {
  Modal.confirm({
    title: '确定要更换骑手吗?',
    onOk: async () => {
      console.log('onOk')
      const { data, code } = await changeRider({
        riderId: innerVal.value,
        orderId: orderId.value || '',
      })
      if (code !== 300) return
      emit('change', innerVal.value)
    },
    onCancel() {
      console.log('Cancel')
    },
  })
}

onMounted(async () => {
  getRiders()
})
</script>

<style scoped lang="scss"></style>
